<template>
  <div class="speed-chart-container">
    <div class="chart-header">
      <span class="chart-title">下载速度</span>
      <span class="current-speed">{{ formatSpeed(currentSpeed) }}</span>
    </div>
    <canvas ref="chartCanvas" class="speed-canvas"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';

const props = defineProps({
  speed: {
    type: Number,
    default: 0
  },
  maxPoints: {
    type: Number,
    default: 50
  }
});

const chartCanvas = ref(null);
const speedHistory = ref([]);
const currentSpeed = ref(0);
let animationFrame = null;
let ctx = null;

const formatSpeed = (speed) => {
  if (!speed || speed === 0) return '0 B/s';
  if (speed < 1024) return `${speed.toFixed(0)} B/s`;
  if (speed < 1024 * 1024) return `${(speed / 1024).toFixed(2)} KB/s`;
  return `${(speed / 1024 / 1024).toFixed(2)} MB/s`;
};

const initCanvas = () => {
  if (!chartCanvas.value) return;
  
  const canvas = chartCanvas.value;
  const dpr = window.devicePixelRatio || 1;
  const rect = canvas.getBoundingClientRect();
  
  canvas.width = rect.width * dpr;
  canvas.height = rect.height * dpr;
  
  ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);
  
  // 初始化速度历史
  speedHistory.value = Array(props.maxPoints).fill(0);
};

const drawChart = () => {
  if (!ctx || !chartCanvas.value) return;
  
  const canvas = chartCanvas.value;
  const rect = canvas.getBoundingClientRect();
  const width = rect.width;
  const height = rect.height;
  
  // 清空画布
  ctx.clearRect(0, 0, width, height);
  
  // 背景网格
  ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
  ctx.lineWidth = 1;
  
  // 水平网格线
  for (let i = 0; i <= 4; i++) {
    const y = (height / 4) * i;
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(width, y);
    ctx.stroke();
  }
  
  // 找出最大值用于缩放
  const maxSpeed = Math.max(...speedHistory.value, 1);
  const scale = (height - 20) / maxSpeed;
  
  // 绘制区域填充
  const gradient = ctx.createLinearGradient(0, 0, 0, height);
  gradient.addColorStop(0, 'rgba(0, 212, 255, 0.3)');
  gradient.addColorStop(1, 'rgba(0, 212, 255, 0.05)');
  
  ctx.fillStyle = gradient;
  ctx.beginPath();
  ctx.moveTo(0, height);
  
  speedHistory.value.forEach((speed, index) => {
    const x = (width / (props.maxPoints - 1)) * index;
    const y = height - (speed * scale);
    if (index === 0) {
      ctx.lineTo(x, y);
    } else {
      ctx.lineTo(x, y);
    }
  });
  
  ctx.lineTo(width, height);
  ctx.closePath();
  ctx.fill();
  
  // 绘制线条
  ctx.strokeStyle = '#00d4ff';
  ctx.lineWidth = 2;
  ctx.beginPath();
  
  speedHistory.value.forEach((speed, index) => {
    const x = (width / (props.maxPoints - 1)) * index;
    const y = height - (speed * scale);
    
    if (index === 0) {
      ctx.moveTo(x, y);
    } else {
      ctx.lineTo(x, y);
    }
  });
  
  ctx.stroke();
  
  // 绘制光点（最新的点）
  const lastX = width;
  const lastY = height - (speedHistory.value[speedHistory.value.length - 1] * scale);
  
  // 外圈光晕
  const glowGradient = ctx.createRadialGradient(lastX, lastY, 0, lastX, lastY, 8);
  glowGradient.addColorStop(0, 'rgba(0, 212, 255, 0.8)');
  glowGradient.addColorStop(1, 'rgba(0, 212, 255, 0)');
  
  ctx.fillStyle = glowGradient;
  ctx.beginPath();
  ctx.arc(lastX, lastY, 8, 0, Math.PI * 2);
  ctx.fill();
  
  // 内圈实心点
  ctx.fillStyle = '#00d4ff';
  ctx.beginPath();
  ctx.arc(lastX, lastY, 3, 0, Math.PI * 2);
  ctx.fill();
};

const updateSpeed = (newSpeed) => {
  currentSpeed.value = newSpeed;
  
  // 添加新速度到历史记录
  speedHistory.value.shift();
  speedHistory.value.push(newSpeed);
  
  drawChart();
};

const animate = () => {
  drawChart();
  animationFrame = requestAnimationFrame(animate);
};

watch(() => props.speed, (newSpeed) => {
  updateSpeed(newSpeed);
});

onMounted(() => {
  initCanvas();
  animate();
  
  // 处理窗口大小变化
  window.addEventListener('resize', initCanvas);
});

onUnmounted(() => {
  if (animationFrame) {
    cancelAnimationFrame(animationFrame);
  }
  window.removeEventListener('resize', initCanvas);
});
</script>

<style scoped>
.speed-chart-container {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.chart-title {
  font-size: 0.875rem;
  color: #a0a0a0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.current-speed {
  font-size: 1.25rem;
  font-weight: 700;
  color: #00d4ff;
  font-variant-numeric: tabular-nums;
}

.speed-canvas {
  width: 100%;
  height: 80px;
  display: block;
}
</style>

